<!DOCTYPE html>
<html>

<head>
    <title>mydemo</title>
    <meta charset="utf-8">
    <style type="text/css">
        /*初始化各类标签样式*/
        
        #change,
        #tb {
            margin: 0;
            padding: 0;
        }
        
        #change li {
            list-style-type: none;
        }
        
        #tb tr th a {
            text-decoration: none;
            color: green;
        }
        
        #change,
        #tb {
            width: 500px;
            height: 25px;
            margin: 0 auto;
            clear: both;
        }
        /*背景样式设置*/
        
        #change li {
            float: left;
            margin: 10px 10px 10px 0;
            width: 5px;
            height: 5px;
            border-width: 5px;
            border-style: solid;
        }
        
        #red {
            border-color: red;
            background: red;
        }
        
        #green {
            border: green;
            background: green;
        }
        
        #black {
            border: black;
            background: black;
        }
        
        #change li.current {
            background: #fff !important;
        }
        /*标题样式设置*/
        
        #tb {
            border-collapse: collapse;
        }
        
        #tb tr th {
            border: 1px green solid;
            font-size: 11px;
        }
        
        #tb tr th a:hover {
            text-decoration: underline;
        }
    </style>
    <script type="text/javascript">
        function changeBg(elem, attr, value) {
            elem.style[attr] = value;
        }
        window.onload = function() {
            var oLi = document.getElementsByTagName("li");
            var oBd = document.getElementById("bd");
            var oTb = document.getElementById("tb");
            var oAtt = ["background"];
            /*背景色变化值*/
            var oBdBg = ["#ff0076", "#718000", "#cccccc"];
            var oTbBg = ["red", "green", "black"];

            /*背景切换功能*/
            for (var i = 0; i < oLi.length; i++) {
                oLi[i].index = i;
                oLi[i].onclick = function() {
                    for (var x in oLi) oLi[x].className = "";
                    this.className = "current";

                    if (this.index == oLi.length - 1) {
                        changeBg(oBd, oAtt[0], oBdBg[2]);
                        changeBg(oTb, oAtt[0], oTbBg[2]);
                    } else {
                        changeBg(oBd, oAtt[0], oBdBg[this.index]);
                        changeBg(oTb, oAtt[0], oTbBg[this.index]);
                    }
                    /*此处可等同于：
                                       this.index == oLi.length - 1
                                       && changeBg(oBd,oAtt[0],oBdBg[2]) &&【若执行代码多，使用&&连接，不用分号】
                                           changeBg(oTb,oAtt[0],oTbBg[2]);【最后再用分号，分隔第二条件执行内容】
                                           
                                           changeBg(oBd,oAtt[0],oBdBg[this.index]);
                                           changeBg(oTb,oAtt[0],oTbBg[this.index]);*/


                }
            }


        }
    </script>
    <title></title>
</head>

<body id="bd">
    <ul id="change">
        <li id="red" title="红色"></li>
        <li id="green" name="current" title="绿色"></li>
        <li id="black" title="黑色"></li>
    </ul>
    <table id="tb">
        <tr>
            <th><a href="#">新闻</a></th>
            <th><a href="#">娱乐</a></th>
            <th><a href="#">体育</a></th>
            <th><a href="#">电影</a></th>
            <th><a href="#">音乐</a></th>
            <th><a href="#">旅游</a></th>
        </tr>
    </table>
</body>

</html>